<template>
  <div p-5>
    <div class="all">
      <SpotInfo :id="route.query.id" :queryType="1"></SpotInfo>
      <div class="penaltyInfo-body" v-if="penaltyData?.status == 6">
        <div class="penaltyInfo-body-box">
          <div class="penaltyInfo-body-box-tittle">
            <div class="penaltyInfo-body-box-tittle-left"></div>
            <div class="penaltyInfo-body-box-tittle-right">处罚信息</div>
          </div>
          <div class="penaltyInfo-body-box-info">
            <a-descriptions
              :labelStyle="{ width: '160px' }"
              :content-style="{ color: '#444444' }"
              bordered
            >
              <a-descriptions-item label="罚款金额" :span="3" v-if="penaltyData?.penaltyAmount">{{
                penaltyData?.penaltyAmount + '元'
              }}</a-descriptions-item>
            </a-descriptions>
            <div style="width: 30%">
              <BookCreate
                :type="2"
                :caseId="route.query.id"
                :url="dccffileInfoData.oldFileUrl"
                :newFileUrl="dccffileInfoData.newFileUrl"
                :caseFileId="dccffileInfoData.id"
                :isShow="false"
                @getBookUrl="getBookUrl"
              />
            </div>
            <div style="width: 30%">
              <BookCreate
                :type="16"
                :caseId="route.query.id"
                :url="sdhzfileInfoData.oldFileUrl"
                :newFileUrl="sdhzfileInfoData.newFileUrl"
                :caseFileId="sdhzfileInfoData.id"
                :isShow="false"
                @getBookUrl="getBookUrl"
              />
            </div>
            <div style="width: 30%">
              <BookCreate
                :type="22"
                :caseId="route.query.id"
                :url="jnpzfileInfoData.oldFileUrl"
                :newFileUrl="jnpzfileInfoData.newFileUrl"
                :caseFileId="jnpzfileInfoData.id"
                :isShow="false"
                @getBookUrl="getBookUrl"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="bottomBox"></div>
      <div class="bottomBtns" style="z-index: 3">
        <a-button size="large" @click="cacel">关闭</a-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import SpotInfo from '../spotInfo.vue';
  import router from '@/router';
  import { useRoute } from 'vue-router';
  import { caseDetail } from '@/api/administrativePenalty/case-management';

  const route = useRoute();

  const goTask = () => {
    router.push({
      path: '/supervision/task-view',
      query: { id: penaltyData.value.taskId },
    });
  };

  //当场处罚决定书
  const dccffileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
  });

  //送达回证
  const sdhzfileInfoData = ref({
    oldFileUrl: '123',
    newFileUrl: '',
    id: '',
  });

  //缴纳凭证
  const jnpzfileInfoData = ref({
    oldFileUrl: '123',
    newFileUrl: '',
    id: '',
  });

  const caseDetailApi = async () => {
    const data = await caseDetail(route.query.id as any, 1);
    penaltyData.value = data;

    if (penaltyData.value.fileInfoList) {
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 20).length) {
        dccffileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 20,
        )[0];
      } else {
        dccffileInfoData.value = {
          oldFileUrl: '',
          newFileUrl: '',
          id: '',
        };
      }
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 16).length) {
        sdhzfileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 16,
        )[0];
      } else {
        sdhzfileInfoData.value = {
          oldFileUrl: '123',
          newFileUrl: '',
          id: '',
        };
      }
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 17).length) {
        jnpzfileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 17,
        )[0];
      } else {
        jnpzfileInfoData.value = {
          oldFileUrl: '123',
          newFileUrl: '',
          id: '',
        };
      }
    }
  };

  const getBookUrl = (data) => {
    if (data.code == 0) {
      caseDetailApi();
    }
  };

  const cacel = () => {
    router.push({
      path: '/administrative-penalty/administrative-penalty/spot-punishment',
    });
  };

  const penaltyData = ref();

  onMounted(async () => {
    caseDetailApi();
  });
</script>
<style lang="less" scoped>
  .all {
    background-color: #ffffff;

    &-top {
      &-tittle {
        padding: 0px 0 16px 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
        color: rgba(68, 68, 68, 1);

        border-bottom: 1px solid rgba(240, 240, 240, 1);
      }
    }

    .penaltyInfo {
      &-body {
        &-box {
          margin-bottom: 16px;
          &-tittle {
            display: flex;
            align-items: center;
            padding: 13px 0 13px 0;
            &-left {
              border: 1px solid #0f53ac;
              margin-right: 7px;
              border-radius: 4px;
              height: 14px;
            }

            &-right {
              font-size: 16px;
              font-weight: 400;
              line-height: 24px;
              color: rgba(68, 68, 68, 1);
            }
          }

          &-info {
            :global(.ant-descriptions-item-label) {
              width: 160px;
            }
          }
        }
      }
    }

    .noData {
      height: 64px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>
